import { FC } from 'react'
import './print.css'
import Heard from '../../compents/Heard/Heard.tsx'
// import MemoCall from '../../compents/memoAndCallback/Father.tsx'
// {/*<MemoCall/>*/}
import AutoSelect from './AutoSelect.tsx'
import printJS from 'print-js';
import { Table, Button } from 'antd'
const PrintJs1: FC = () => {
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  const someJSONdata = [
    {
      name: 'John Doe',
      email: 'john@doe.com',
      phone: '111-111-1111'
    },
    {
      name: 'Barry Allen',
      email: 'barry@flash.com',
      phone: '222-222-2222'
    },
    {
      name: 'Cool Dude',
      email: 'cool@dude.com',
      phone: '333-333-3333'
    }
  ]
  const handleClick1: () => void = (): void => {
    //根据页面元素打印
    printJS({
      printable: 'print-table',
      header: 'PrintJS - Form Element Selection',
      type: 'html',
      style: 'tbody { color:yellow;  position: relative;left: 80px;}',
      gridStyle: 'color:red'
    })

  }
  const handleClick11: () => void = (): void => {

    // 打印json
    printJS({
      printable: someJSONdata,
      properties: ['name', 'email', 'phone'],
      type: 'json',
      gridHeaderStyle: 'color: red;',
      gridStyle: 'color:red; position: relative;left: 80px;'
    },
    )
  }
  return (
    <div className={'PrintJs1'} >
      <Heard />
      <AutoSelect />
      <Table id='print-table' rowClassName={'aaaaaaaaaa'} dataSource={dataSource} columns={columns} />
      <Button type='primary' onClick={handleClick1}>printjs打印页面元素</Button>
      <Button type='primary' onClick={handleClick11}>printjs打印json</Button>
    </div>
  )
}
export default PrintJs1;
